<template>
    <div>
        <ul class="radiolist">
          <template  v-for="(item, index) in datavalue">
              <li
                :class="{'active' : item[customValue] == value}"
                @click="selecton(item,$event)"
                :key="index">
                <el-badge :value="parseInt(item.num)" :max="99" class="item" style="width: 100%;">
                  <div>{{ item[customLabel] }}</div>
                </el-badge>
              </li>
          </template>
        </ul>
    </div>
</template>
<script>
export default {
    name: "selectbox",
    props:{
        value:{
            type:String
        },
        datavalue:{
            type:Array
        },
        customLabel:{
            type:String,
            default:'label'
        },
        customValue:{
            type:String,
            default:'code'
        }
    },
    model:{
        props:'value',
        event:'select'
    },
    methods:{
        selecton(item){
            this.$emit('select', item[this.customValue])
            this.$emit('change', item[this.customValue])
        }
    }
}
</script>
<style scoped lang="scss">
.radiolist{
    padding: 0;
    color: #909399;
    li{
        list-style: none;
        background-color: #f4f4f5;
        border-radius: 5px;
        margin-bottom: 5px;
        padding: 8px 16px;
        cursor: pointer;
        transition: all 0.3s;
        &.active{
            background-color: #409EFF;
            color: #fff;
            &:hover{
                transition: all 0.3s;
                background-color: #46a6ff;
            }
        }

    }
}
</style>
